/**
 *  1. 创建项目目录结构
 *       cart-project
 *          -|src
 *            -|css       --> css
 *            -|js        --> js
 *            -|lib       --> 第三方文件
 *            -|pages     --> html页面
 *            -|sass      --> sass文件
 *            -|static    --> images文件
 * 
 * 2. 初始化项目
 *      npm init -y
 *       cart-project
 *          -|src
 *            -|css
 *            -|js
 *            ......
 *          -|pagckage.json
 * 3. 本地安装gulp
 *      npm i gulp      --> 线下线上环境依赖
 *      npm i -D gulp   --> 线下开发dev环境依赖
 * 
 * 4. 配置文件gulpfile.js
 *     4.1 写任务
 */

const gulp = require('gulp') //引入本地安装的gulp
const cssmin = require('gulp-cssmin') //下载引入css压缩处理   npm i -D gulp-cssmin
/*下载第三方包作用sass文件转css文件   npm i -D gulp-sass
                                    npm i sass  */
const sass = require('gulp-sass')(require('sass')) //引用sass
const uglify = require('gulp-uglify') //下载引入js压缩处理  npm i -D gulp-uglify
/*下载引入es6转es5(3个依赖)      npm i -D gulp-babel@7.0.1
                                npm i -D babel-core
                                npm i -D babel-preset-es2015  */
const babel = require('gulp-babel') //引入一次

const htmlmin = require('gulp-htmlmin') //下载引入html压缩处理   npm i -D gulp-htmlmin
const clean = require('gulp-clean') //下载引入清除某个目录功能   npm i -D gulp-clean
const webserver = require('gulp-webserver') //下载引入内置web服务器   npm i -D gulp-webserver

/*
 *css打包任务
 *  压缩处理  第三方包 cssmin
 */
gulp.task('css', function () {
    return gulp.src('./src/css/**') //从文件系统读取css数据(对哪些文件进行操作)
        .pipe(cssmin()) //css文件压缩处理
        .pipe(gulp.dest('./dist/css/')) //将处理后的数据写入dist下的css文件夹里
})

/*
 *saas打包任务
 *  1.sass转css
 *  2.压缩处理
 */
gulp.task('sass', function () {
    return gulp.src('./src/sass/**') //从文件系统读取sass数据(读取文件流)
        .pipe(sass()) //sass文件流转为css文件流
        .pipe(cssmin()) //css文件压缩处理
        .pipe(gulp.dest('./dist/css/')) //将处理后的数据写入dist下的css文件夹里
})

/**
 *  js打包任务
 *    1. es6最新语法转成es5语法
 *    2. 压缩js代码
 *         ()=>{}      function(){}
 *         class A     function A(){}
 *         let const  -> var
 */
gulp.task('js', function () {
    return gulp.src('./src/js/**') //从文件系统读取js数据(读取文件流)
        .pipe(babel({
            presets: ['es2015'] //将数据从es6最新语法转成es5语法
        }))
        .pipe(uglify()) //js文件压缩处理
        .pipe(gulp.dest('./dist/js/')) //将处理后的数据写入dist下的js文件夹里
})

/**
 * html打包任务
 *   1. 压缩html代码
 */
gulp.task('html', function () {
    return gulp.src('./src/pages/**') //从文件系统读取pages数据(读取文件流)
        .pipe(htmlmin({
            removeEmptyAttributes: true, //移除所有空属性
            collapseWhitespace: true //压缩html
        }))
        .pipe(gulp.dest('./dist/pages/')) //将处理后的数据写入dist下的pages文件夹里
})

/**
 * lib和static打包
 */
gulp.task('lib', function () {
    return gulp.src('./src/lib/**') //从文件系统读取lib数据(读取文件流)
        .pipe(gulp.dest('./dist/lib/')) //将处理后的数据写入dist下的lib文件夹里
})
gulp.task('static', function () {
    return gulp.src('./src/static/**') //从文件系统读取static数据(读取文件流)
        .pipe(gulp.dest('./dist/static/')) //将处理后的数据写入dist下的static文件夹里
})

/**
 * 清除dist目录任务
 */
gulp.task('clean', function () {
    return gulp.src('./dist', { //从文件系统读取dist数据(读取文件流)
            allowEmpty: true //允许dist文件为空
        })
        .pipe(clean()) //执行clean任务
})

/**
 * 启动webserver
 */
gulp.task('webserver', function () {
    return gulp.src('./dist') //从文件系统读取dist数据(读取文件流)
        .pipe(webserver({
            host: 'localhost', //配置打开浏览器的域名
            port: 3008, //配置打开浏览器的端口号
            livereload: true, //自动刷新浏览器
            open: './pages/index.html' //默认打开dist文件夹下的哪个文件
        }))
})

/**
 * 监听所有文件变化任务(当文件夹下的内容修改的时候，自动帮我们重新编译)
 */
gulp.task('watch', function () {
    gulp.watch('./src/css/**', gulp.parallel('css'))
    gulp.watch('./src/js/**', gulp.parallel('js'))
    gulp.watch('./src/sass/**', gulp.parallel('sass'))
    gulp.watch('./src/pages/**', gulp.parallel('html'))
    gulp.watch('./src/static/**', gulp.parallel('static'))
    gulp.watch('./src/lib/**', gulp.parallel('lib'))
})

/**
 * 顺序执行所有任务
 */
// gulp.task('mytask', gulp.series('sass', 'css', 'js', 'html', 'static', 'lib'))

/**
 * 定义一个默认任务
 * exports.default暴露一个默认任务
    根目录下可执行运行默认任务，通过 gulp 命令
 */
// exports.default = gulp.series('sass','css','js','html','static','lib')
// exports.default = gulp.parallel('clean','sass','css','js','html','static','lib')
exports.default = gulp.series( //series将任务按顺序执行
    'clean', //先单独优先执行清除
    gulp.parallel('sass', 'css', 'js', 'html', 'static', 'lib'), //parallel将任务并发执行
    'webserver', //执行启动webserver
    'watch') //执行监听功能